<template>
  <div class="app-container">
    <el-row>
      <el-col :span="13" />
      <el-col :span="11">
        <el-input v-model="search" placeholder="输入类信息来过滤" size="small" clearable prefix-icon="el-icon-search" />
        <el-table
          v-loading="loading"
          :data="classHistogram.heapHistogram"
          border
          stripe
          style="width: 100%"
          size="mini"
          height="400"
        >
          <el-table-column
            prop="instances"
            label="实例数"
            width="80"
          />
          <el-table-column
            prop="bytes"
            label="字节"
            width="80"
            sortable
            :formatter="formatSize"
          />
          <el-table-column
            prop="name"
            label="类名"
          />
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import jvm from '@/api/jvm'

import { formatSizeHuman } from '@/utils'

export default {
  name: 'Memory',
  props: {
    connName: {
      type: String
    }
  },
  data() {
    return {
      classHistogram: [],
      loading: false,
      search: null
    }
  },
  methods: {
    formatSize(row, column) {
      return formatSizeHuman(row[column['property']])
    },
    init() {
      this.refreshData()
    },
    refreshData() {
      this.loading = true
      jvm.diagnostic.gcClassHistogram(this.connName, true).then(res => {
        this.classHistogram = res.data
        this.loading = false
      }).catch(res => {
        this.loading = false
      })
    }
  }

}
</script>


